<template>
    <div class="diary" @click.prevent="closeDelete">
        <headerView :headerTitle="headerTitle" class="header" />
        <div class="container">
            <div class="add-icon">
                <el-icon class="add-icon-item" @click.prevent="router.push('/Diary/AddDiary')">
                    <Plus />
                </el-icon>
            </div>
            <div class="item" v-for="(item, index) in diaryTab" :key="index">
                <div class="item-left">
                    <div class="left-round"></div>
                    <div class="left-line"></div>
                </div>
                <div class="item-right">
                    <div class="right-tate">{{ item.date }}</div>
                    <div class="right-content" :id="index" @click.prevent="expanded(index)"
                        @touchstart="gtouchstart(item)" @touchmove="gtouchmove(item)" @touchend="gtouchend(item)">
                        <div class="item-title">
                            <p :class="{ titleUnExpanded: item.isExpanded }" :id="index + 'title'">{{ item.title }}</p>
                        </div>
                        <div class="item-content">
                            <p :class="{ unExpanded: item.isExpanded }" :id="index + 'content'">{{ item.content }}</p>
                        </div>
                        <div class="deleteDiary" v-if="thisId == item.id"
                            @click.prevent="deleteDiary(item.id, item.title)">
                            <span>删除</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Diary">
import { ref, onMounted } from 'vue';
import headerView from '@/components/Header/index.vue';
import service from '@/utils/request';
import { useRouter } from 'vue-router';
const router = useRouter();
const headerTitle = ref({
    title: '日记',
    aline: 'left'
});
const thisId = ref('');
const diaryTab = ref([]);
const inteTable = () => {
    service({
        url: 'api/Diarys',
        method: 'get',
    }).then(res => {
        if (res != undefined) {
            diaryTab.value = [];
            Array.from(res.data).forEach((item) => {
                diaryTab.value.push({ id: item.id, title: item.title, content: item.content, date: item.createTime, isExpanded: true });
            });
        }
    });
};
const deleteDiary = (id, title) => {
    ElMessageBox.confirm(
        `确定删除日记 '${title}'?`,
        '',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false,
        },
    ).then(() => {
        service({
            url: 'api/Diarys/' + id,
            method: 'delete',
        }).then(res => {
            if (res.status == 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                    plain: true,
                })
                inteTable();
            }
        });
    }).catch(() => { });
};
// 点击扩展内容显示
const expanded = (index) => {
    diaryTab.value[index].isExpanded = !diaryTab.value[index].isExpanded;
}
// 长按事件
const gtouchstart = (item) => {
    item.timeOutEvent = setTimeout(() => {
        thisId.value = item.id;
    }, 800);
    return false;
};
const gtouchend = (item) => {
    clearTimeout(item.timeOutEvent);
    return false;
};
const gtouchmove = (item) => {
    clearTimeout(item.timeOutEvent);
    item.timeOutEvent = 0;
};
const closeDelete = () => {
    if (thisId.value != '') {
        thisId.value = '';
    }
}
onMounted(() => {
    inteTable();
});
</script>

<style scoped>
.diary {
    width: 100vw;
    height: 100%;
    display: table;
    background-color: rgb(217 235 236);
}

.header {
    width: 100vw;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.container {
    margin: 0 auto;
    width: 90%;
    height: calc(100vh-60px);
    margin-top: 60px;
}

.add-icon {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    direction: rtl;
}

.add-icon-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    background-color: #8ca5c0;
    position: fixed;
    top: 70px;
    z-index: 1000;
}

.item {
    width: 100%;
    min-height: 160px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.item-left {
    width: 13px;
    min-height: 160px;
    height: auto;
    font-size: 10px;
}

.item-right {
    width: 93%;
    min-height: 120px;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.left-round {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #adc8e4;
}

.left-line {
    margin: 0 auto;
    width: 3px;
    min-height: 150px;
    height: calc(100% - 13px);
    flex: 1;
    background-color: #adc8e4;
}

.right-tate {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #8b8b8b;
}

.right-content {
    width: 100%;
    min-height: 80px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 3px 8px 1px #dedede;
    background-color: #ffffff;
    position: relative;
}

.item-title {
    width: 90%;
    min-height: 35px;
    height: auto;
    line-height: 35px;
    font-size: 20px;
}

.item-title>p {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.titleUnExpanded {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.item-content {
    padding: 15px 0;
    width: 90%;
    min-height: 80px;
    height: auto;
    font-size: 14px;
}

.unExpanded {
    margin: 0;
    padding: 0;
    /* 隐藏三行文字 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.deleteDiary {
    position: absolute;
    left: 40%;
    top: 50%;
    width: 80px;
    height: 30px;
    background-color: #f3c093;
    text-align: center;
    line-height: 30px;
    border-radius: 3px;
    opacity: 0.9;
    letter-spacing: 2px;
}
</style>